<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详细信息 - 青南学长平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #6ab1f7;
            --primary-light: #a8d0fe;
            --secondary: #4a8bc9;
            --accent: #8ec5fc;
            --text: #2c3e50;
            --text-light: #6c757d;
            --background: #f0f8ff;
            --white: #ffffff;
            --card-shadow: 0 8px 20px rgba(106, 177, 247, 0.15);
            --hover-shadow: 0 12px 30px rgba(106, 177, 247, 0.25);
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: var(--background);
            color: var(--text);
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        /* 导航栏样式 */
        header {
            background-color: var(--white);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            position: sticky;
            top: 0;
            z-index: 100;
        }
        
        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo-icon {
            color: var(--primary);
            font-size: 28px;
        }
        
        .logo-text {
            font-size: 24px;
            font-weight: 700;
            color: var(--primary);
            letter-spacing: -0.5px;
        }
        
        .back-button {
            color: var(--text);
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: color 0.3s;
            padding: 8px 16px;
            border-radius: 8px;
            background: var(--white);
            border: 1px solid var(--primary-light);
        }
        
        .back-button:hover {
            color: var(--primary);
            border-color: var(--primary);
        }
        
        /* 详细信息区域样式 */
        .detail-section {
            padding: 40px 0;
            flex: 1;
        }
        
        .detail-container {
            display: grid;
            grid-template-columns: 1fr 2fr;
            gap: 30px;
        }
        
        .profile-card {
            background: var(--white);
            border-radius: 20px;
            padding: 30px;
            box-shadow: var(--card-shadow);
            text-align: center;
            height: fit-content;
            position: sticky;
            top: 100px;
        }
        
        .info-card {
            background: var(--white);
            border-radius: 20px;
            padding: 30px;
            box-shadow: var(--card-shadow);
        }
        
        .avatar {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 5px solid var(--primary-light);
            margin: 0 auto 20px;
        }
        
        .name {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 5px;
            color: var(--primary);
        }
        
        .role-tag {
            display: inline-block;
            padding: 6px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        .role-teacher {
            background-color: rgba(106, 177, 247, 0.2);
            color: var(--secondary);
        }
        
        .role-student {
            background-color: rgba(142, 197, 252, 0.3);
            color: #2c6fb0;
        }
        
        .basic-info {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-bottom: 25px;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .info-icon {
            width: 20px;
            text-align: center;
            color: var(--primary);
        }
        
        .hourly-rate {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 15px;
            border-radius: 12px;
            margin: 20px 0;
        }
        
        .rate-value {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .rate-label {
            font-size: 0.9rem;
            opacity: 0.9;
        }
        
        .contact-button {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: var(--white);
            border: none;
            border-radius: 10px;
            padding: 14px 20px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin-top: 15px;
        }
        
        .contact-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(106, 177, 247, 0.4);
        }
        
        .section-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--primary-light);
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .info-box {
            background: rgba(168, 208, 254, 0.1);
            border-radius: 12px;
            padding: 20px;
            border-left: 4px solid var(--primary);
        }
        
        .info-box-title {
            font-size: 1rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--secondary);
        }
        
        .info-box-content {
            color: var(--text);
            line-height: 1.5;
        }
        
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 10px;
        }
        
        .tag {
            background: var(--primary-light);
            color: var(--secondary);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
        }
        
        .description-box {
            background: rgba(168, 208, 254, 0.1);
            border-radius: 12px;
            padding: 25px;
            margin-top: 20px;
            line-height: 1.6;
        }
        
        /* 页脚样式 */
        footer {
            background-color: var(--white);
            padding: 30px 0;
            margin-top: 40px;
            border-top: 1px solid var(--primary-light);
        }
        
        .footer-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .footer-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            color: var(--primary);
            font-size: 1.2rem;
        }
        
        .footer-links {
            display: flex;
            gap: 20px;
        }
        
        .footer-link {
            color: var(--text-light);
            text-decoration: none;
            transition: color 0.3s;
        }
        
        .footer-link:hover {
            color: var(--primary);
        }
        
        .copyright {
            text-align: center;
            margin-top: 30px;
            color: var(--text-light);
            font-size: 0.9rem;
        }
        
        /* 响应式设计 */
        @media (max-width: 968px) {
            .detail-container {
                grid-template-columns: 1fr;
            }
            
            .profile-card {
                position: static;
            }
        }
        
        @media (max-width: 768px) {
            .info-grid {
                grid-template-columns: 1fr;
            }
            
            .footer-content {
                flex-direction: column;
                gap: 20px;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <div class="container">
            <div class="navbar">
                <div class="logo">
                    <i class="fas fa-graduation-cap logo-icon"></i>
                    <span class="logo-text">青南学长</span>
                </div>
                
                <a href="index.html" class="back-button">
                    <i class="fas fa-arrow-left"></i>
                    <span>返回列表</span>
                </a>
            </div>
        </div>
    </header>

    <!-- 详细信息区域 -->
    <section class="detail-section">
        <div class="container">
            <div class="detail-container">
                <!-- 左侧个人信息卡片 -->
                <div class="profile-card">
                    <img src="./temeplates/images/avatar/2.png" alt="头像" class="avatar" id="detail-avatar">
                    <h1 class="name" id="detail-name">李老师</h1>
                    <div class="role-tag role-teacher" id="detail-role">教师</div>
                    
                    <div class="basic-info">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-user"></i>
                            </div>
                            <div>
                                <span id="detail-age">32岁</span>
                            </div>
                        </div>
                        
                        <!-- 新增性别信息项 -->
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-venus-mars"></i>
                            </div>
                            <div>
                                <span id="detail-gender">女</span>
                            </div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-graduation-cap"></i>
                            </div>
                            <div>
                                <span id="detail-grade">初中、高中</span>
                            </div>
                        </div>
                        
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-book"></i>
                            </div>
                            <div>
                                <span id="detail-subject">英语</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="hourly-rate">
                        <div class="rate-value" id="detail-salary">¥120/小时</div>
                        <div class="rate-label" id="salary-label">预期时薪</div>
                    </div>
                    
                    <button class="contact-button" id="contact-button">
                        <i class="fas fa-comment-dots"></i>
                        立即联系
                    </button>
                </div>
                
                <!-- 右侧详细信息卡片 -->
                <div class="info-card">
                    <h2 class="section-title">详细信息</h2>
                    
                    <div class="info-grid">
                        <!-- 教师特有信息 -->
                        <div class="info-box" id="teacher-style-box">
                            <div class="info-box-title">教学风格</div>
                            <div class="info-box-content" id="detail-style">注重互动式教学，善于通过实际案例帮助学生理解知识点，课堂氛围轻松活跃。</div>
                        </div>
                        
                        <!-- 学生特有信息 -->
                        <div class="info-box" id="student-personality-box" style="display: none;">
                            <div class="info-box-title">学生性格</div>
                            <div class="info-box-content" id="detail-personality"></div>
                        </div>
                        
                        <div class="info-box" id="student-requirements-box" style="display: none;">
                            <div class="info-box-title">对教师要求</div>
                            <div class="info-box-content" id="detail-requirements"></div>
                        </div>
                        
                        <div class="info-box">
                            <div class="info-box-title">可教科目</div>
                            <div class="info-box-content">
                                <div class="tags-container" id="detail-subjects-tags">
                                    <span class="tag">英语</span>
                                    <span class="tag">口语</span>
                                    <span class="tag">写作</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="info-box">
                            <div class="info-box-title">可教年级</div>
                            <div class="info-box-content">
                                <div class="tags-container" id="detail-grades-tags">
                                    <span class="tag">初中</span>
                                    <span class="tag">高中</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="description-box">
                        <h3 class="info-box-title" id="description-title">教师简介</h3>
                        <p id="detail-description">
                            英语专业八级，拥有8年英语教学经验。曾在知名培训机构担任英语教研组长，熟悉中高考英语考点和命题规律。善于根据学生特点制定个性化学习方案，帮助学生快速提升英语成绩。教学风格亲切耐心，注重培养学生的英语思维能力和实际应用能力。所教学生中有多名考入重点大学，英语成绩显著提高。
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <i class="fas fa-graduation-cap"></i>
                    <span>青南学长平台</span>
                </div>
                
                <div class="footer-links">
                    <a href="about.html" class="footer-link">关于我们</a>
                    <a href="about.html" class="footer-link">联系我们</a>
                    <a href="provisions.html" class="footer-link">隐私政策</a>
                    <a href="provisions.html" class="footer-link">使用条款</a>
                </div>
            </div>
            
            <div class="copyright">
                © 2025 青南学长平台 - 为学习和教育搭建桥梁
            </div>
        </div>
    </footer>

    <script>
        // 模拟数据 - 在实际应用中，这些数据应该从后端API获取
        const teacherData = {
            id: 2,
            name: "李老师",
            role: "teacher",
            avatar: "./temeplates/images/avatar/2.png",
            age: "32岁",
            gender: "女",
            grades: ["初中", "高中"],
            subjects: ["英语", "口语", "写作"],
            salary: "¥120/小时",
            style: "注重互动式教学，善于通过实际案例帮助学生理解知识点，课堂氛围轻松活跃。鼓励学生提问，培养自主学习能力。",
            description: "英语专业八级，拥有8年英语教学经验。曾在知名培训机构担任英语教研组长，熟悉中高考英语考点和命题规律。善于根据学生特点制定个性化学习方案，帮助学生快速提升英语成绩。教学风格亲切耐心，注重培养学生的英语思维能力和实际应用能力。所教学生中有多名考入重点大学，英语成绩显著提高。"
        };
        
        const studentData = {
            id: 4,
            name: "刘同学",
            role: "student",
            avatar: "./temeplates/images/avatar/4.png",
            age: "16岁",
            gender: "女",
            grade: "高中",
            subjects: ["物理", "数学"],
            salary: "¥100/小时",
            personality: "性格内向但学习认真，物理基础较弱，但愿意努力提升。需要老师耐心引导，建立学习自信心。",
            requirements: "希望找到有经验的物理老师，能够耐心讲解基础知识，帮助建立物理思维模型。最好有高中物理教学经验，能够系统梳理知识点。",
            description: "高二学生，物理基础较弱，希望找到有经验的物理老师帮助提高成绩。学习态度认真，愿意配合老师教学安排。数学成绩中等，希望在物理方面有所突破。平时喜欢阅读科普书籍，对物理现象有一定兴趣。"
        };
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 默认显示教师数据
            // 在实际应用中，这里应该根据URL参数或从列表页面传递的数据来决定显示教师还是学生
            const isTeacher = true; // 设置为false可显示学生数据
            
            if (isTeacher) {
                displayUserDetail(teacherData);
            } else {
                displayUserDetail(studentData);
            }
            
            // 联系按钮点击事件
            document.getElementById('contact-button').addEventListener('click', function() {
                const userName = document.getElementById('detail-name').textContent;
                alert(`联系功能开发中\n我们将为您联系${userName}`);
            });
        });
        
        // 显示用户详细信息
        function displayUserDetail(userData) {
            // 设置基本信息
            document.getElementById('detail-avatar').src = userData.avatar;
            document.getElementById('detail-name').textContent = userData.name;
            document.getElementById('detail-age').textContent = userData.age;
            document.getElementById('detail-gender').textContent = userData.gender;
            
            // 设置角色相关元素
            const roleTag = document.getElementById('detail-role');
            if (userData.role === 'teacher') {
                roleTag.textContent = '教师';
                roleTag.className = 'role-tag role-teacher';
                document.getElementById('salary-label').textContent = '预期时薪';
                document.getElementById('description-title').textContent = '教师简介';
                
                // 显示教师特有信息
                document.getElementById('teacher-style-box').style.display = 'block';
                document.getElementById('detail-style').textContent = userData.style;
                
                // 隐藏学生特有信息
                document.getElementById('student-personality-box').style.display = 'none';
                document.getElementById('student-requirements-box').style.display = 'none';
                
                // 设置年级和科目
                document.getElementById('detail-grade').textContent = userData.grades.join('、');
                document.getElementById('detail-subject').textContent = userData.subjects[0];
                
                // 设置年级标签
                const gradesTagsContainer = document.getElementById('detail-grades-tags');
                gradesTagsContainer.innerHTML = '';
                userData.grades.forEach(grade => {
                    const tag = document.createElement('span');
                    tag.className = 'tag';
                    tag.textContent = grade;
                    gradesTagsContainer.appendChild(tag);
                });
            } else {
                roleTag.textContent = '学生';
                roleTag.className = 'role-tag role-student';
                document.getElementById('salary-label').textContent = '时薪回报';
                document.getElementById('description-title').textContent = '学生简介';
                
                // 显示学生特有信息
                document.getElementById('student-personality-box').style.display = 'block';
                document.getElementById('student-requirements-box').style.display = 'block';
                document.getElementById('detail-personality').textContent = userData.personality;
                document.getElementById('detail-requirements').textContent = userData.requirements;
                
                // 隐藏教师特有信息
                document.getElementById('teacher-style-box').style.display = 'none';
                
                // 设置年级和科目
                document.getElementById('detail-grade').textContent = userData.grade;
                document.getElementById('detail-subject').textContent = userData.subjects[0];
                
                // 设置年级标签
                const gradesTagsContainer = document.getElementById('detail-grades-tags');
                gradesTagsContainer.innerHTML = '';
                const tag = document.createElement('span');
                tag.className = 'tag';
                tag.textContent = userData.grade;
                gradesTagsContainer.appendChild(tag);
            }
            
            // 设置时薪
            document.getElementById('detail-salary').textContent = userData.salary;
            
            // 设置科目标签
            const subjectsTagsContainer = document.getElementById('detail-subjects-tags');
            subjectsTagsContainer.innerHTML = '';
            userData.subjects.forEach(subject => {
                const tag = document.createElement('span');
                tag.className = 'tag';
                tag.textContent = subject;
                subjectsTagsContainer.appendChild(tag);
            });
            
            // 设置描述
            document.getElementById('detail-description').textContent = userData.description;
        }
    </script>
</body>
</html>